<!-- 邮寄记录 -->
<script setup>
import { ref, reactive, onMounted } from 'vue';
import Table from '@/components/Table/index.vue';
import { getMailingRecordsList, cancelPcbaSmtExpress } from '@/server/api/biz.js';
import MailingInfoModel from './MailingInfoModel.vue';
import Pagination from '@/components/Pagination/index.vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const mailingId = ref(2);
const inquireData = reactive({
  orderNumber: '',
  startDate: '',
  endDate: '',
});

const mailingList = [
  {
    id: 2,
    name: t('om.Inthemail'),
  },
  {
    id: 3,
    name: t('om.Done'),
  },
  {
    id: 4,
    name: t('om.Cancelled'),
  },
];
const mailingInfoModel = ref(null);
const elementInfoVisible = ref(false);
const mailingData = reactive({
  mailingList: [],
  list: {
    pageNumber: 1,
    pageSize: 10,
  },
  centerDialogVisible: false,
  serialNumber: '',
  id: '',
});

// 表格列默认
const columns = [
  {
    label: t('om.Mailingtime'),
    prop: 'createTime',
  },
  {
    label: t('om.Deliverynote'),
    prop: 'expressNo',
  },
  {
    label: t('om.OrderNo'),
    prop: 'serialList',
  },
  {
    label: t('mall.component_information'),
    prop: 'serial',
  },
  {
    label: t('om.MailedPCBs'),
    prop: 'materialsNumber',
  },
  {
    label: t('om.Statuses'),
    prop: 'status',
  },
];

// 不同状态表格列
const columnsType = {
  2: [
    ...columns,
    {
      label: t('om.Operate'),
      type: 'btn',
      status: '2',
    },
  ],
  3: [
    ...columns,
    {
      label: t('om.Arrivaltime'),
      status: '3',
      prop: 'updateTime',
    },
  ],
  4: [
    ...columns,
    {
      label: t('om.Cancellationdate'),
      prop: 'updateTime',
      status: '4',
    },
  ],
};

/**
 * 查询
 */
const inquireFileData = () => {
  getList(mailingId.value, inquireData);
};

/**
 * 切换邮寄状态
 * @param {*} item
 */
const selectMailingStatus = (item) => {
  mailingId.value = item.id;
  getList(item.id);
};

/**
 * 获取邮寄记录列表 2邮寄中 3已完成 4已取消
 *
 */
const getList = (status = 2, inquireData = {}, page = 1, limit = 10) => {
  const obj = {
    customerAccountId: 0,
    endTime: inquireData.endDate || '',
    expressName: '',
    expressNo: inquireData.orderNumber || '',
    id: 0,
    limit: limit,
    page: page,
    pageType: 1,
    serial: '',
    startTime: inquireData.startDate || '',
    status: status,
  };
  getMailingRecordsList(obj).then((res) => {
    if (res.code === 200) {
      mailingData.mailingList = res.data.list;
      mailingData.list = res.data;
    }
  });
};

/**
 * 查看邮寄信息
 */
const elementInfoOPen = (row) => {
  elementInfoVisible.value = true;
  mailingInfoModel.value.getQueryPagePcbaSmtBomOrderExpressList(1, 10, row.id);
  mailingInfoModel.value.getQueryPagePcbaSmtPcbExpressMaterialsList(1, 10, row.id);
};

/**
 * 取消邮寄
 */
const cancelMailing = (row) => {
  mailingData.centerDialogVisible = true;
  mailingData.id = row.id;
  mailingData.serialNumber = row.serialList.join(',');
};

/**
 * 确认取消邮寄
 */
const confirmDeleteMailing = () => {
  cancelPcbaSmtExpress(mailingData.id).then((res) => {
    console.log(res);
    if (res.code === 200) {
      mailingData.centerDialogVisible = false;
      getList();
    } else {
      ElMessage.error(res.msg);
      mailingData.centerDialogVisible = false;
    }
  });
};

/**
 * 分页
 * @param {*} page
 * @param {*} limit
 */
const handlePaginationChange = (page = 1, limit = 10) => {
  getList(mailingId.value, inquireData, page, limit);
};

onMounted(() => {
  getList();
});
</script>
<template>
  <div class="mailing-records">
    <div class="mailing-btn">
      <span
        v-for="item in mailingList"
        :class="item.id == mailingId ? 'active' : ''"
        :key="item.id"
        @click="selectMailingStatus(item)"
        >{{ item.name }}</span
      >
    </div>
    <div class="inquire">
      <!-- <el-input placeholder="请输入元器件关键词" v-model="inquireData.keywords"></el-input> -->
      <el-input
        :placeholder="$t('om.Pleaseenterthecouriernumber')"
        v-model="inquireData.orderNumber"
      ></el-input>
      <!-- <el-select v-model="mailingStatus" class="m-2" placeholder="Select" size="large">
        <el-option
          v-for="item in inquireData.mailingList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select> -->
      <span class="text">{{ $t('om.Mailingtime') }}</span>
      <el-date-picker
        v-model="inquireData.startDate"
        type="date"
        :placeholder="$t('om.Startdate')"
        :size="size"
        value-format="YYYY-MM-DD"
      />
      <span class="solid"></span>
      <el-date-picker
        v-model="inquireData.endDate"
        type="date"
        :placeholder="$t('om.Enddate')"
        :size="size"
        value-format="YYYY-MM-DD"
      />
      <el-button type="primary" @click="inquireFileData">{{ $t('om.Search') }}</el-button>
    </div>
    <div class="table">
      <Table
        :data="mailingData.mailingList"
        :columns="columnsType[mailingId]"
        :mailingId="mailingId"
        serial
        :serialOptions="{
          pageNum: mailingData.list.pageNumber,
          pageSize: mailingData.list.pageSize,
        }"
        @elementInfoOPen="elementInfoOPen"
      >
        <template #btnSlot="{ scope }">
          <el-button size="small" type="warning" @click="cancelMailing(scope.row)"
            >{{ $t('om.CancelMailing') }}
          </el-button>
        </template>
      </Table>
      <Pagination
        v-show="mailingData.list.totalRow > 0"
        :total="mailingData.list.totalRow"
        v-model:page="mailingData.list.pageNumber"
        v-model:limit="mailingData.list.pageSize"
        @pagination="handlePaginationChange"
      />
    </div>
  </div>
  <el-dialog v-model="mailingData.centerDialogVisible" :title="$t('om.Prompts')" width="25%" center>
    <span>{{ $t('om.confirm_removal_from_cart', { name: mailingData.serialNumber }) }}</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="mailingData.centerDialogVisible = false">{{
          $t('smt.Cancel')
        }}</el-button>
        <el-button type="primary" @click="confirmDeleteMailing"> {{ $t('smt.Define') }} </el-button>
      </span>
    </template>
  </el-dialog>
  <MailingInfoModel v-model="elementInfoVisible" type="1" ref="mailingInfoModel" />
</template>
<style scoped lang="scss">
.mailing-records {
  width: 100%;

  .mailing-btn {
    display: flex;
    margin-top: 16px;
    margin-bottom: 20px;
    span {
      margin-right: 20px;
      width: 90px;
      height: 36px;
      border-radius: 4px;
      opacity: 1;
      border: 1px solid #e5e5e5;
      background: #ffffff;
      line-height: 36px;
      text-align: center;
      color: #a6a6a6;
      font-size: 14px;
      cursor: pointer;
    }
    .active {
      background-color: var(--mall-color-primary);
      color: var(--mall-header-bg);
    }
  }
  .inquire {
    width: 100%;
    display: flex;
    margin-bottom: 16px;
    align-items: center;
    .el-input {
      width: 180px;
      margin-right: 20px;
    }
    .el-date-editor > .el-input {
      width: 120px !important;
    }
  }

  .solid {
    width: 16px;
    height: 2px;
    border-radius: 2px;
    opacity: 1;
    background: #cccccc;
    margin-right: 16px;
    margin-left: 16px;
  }
  .text {
    margin: 0 16px;
  }
  .el-button {
    margin-left: 16px;
    width: 100px;
  }
}
</style>
